<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    #playbox{ 
      width:500px; 
      height:500px; 
      background:#09F; 
      position:relative
    }

    #box{ 
      width:50px; 
      height:50px; 
      background:#FFF; 
      position:absolute; 
      top:50px; 
      left:50px;
    }
 </style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>
<body>
    <div id="playbox">
    <div id="box" dir="e"></div>
    <button type="button" id="btn">开始</button>
 </div>
</body>
<script type="text/javascript">
  function play(){
   var n = 100; //偏移距离（单位：像素）
   var t = 0.5; //停顿时间（单位：秒）
   var $box = $('#box');
   var dir = $box.attr('dir') || 'e';
   switch(dir){
    case 'e':
     $box.animate({left: '+='+ n +'px'});
     dir = 's';
     break;
    case 's':
     $box.animate({top: '+='+ n +'px'});
     dir = 'w';
     break;
    case 'w':
     $box.animate({left: '-='+ n +'px'});
     dir = 'n';
     break;
    case 'n':
     $box.animate({top: '-='+ n +'px'});
     dir = 'e';
     break;
   }
   $box.attr('dir',dir);
   window.fn = setTimeout(function(){
    play();
   },t*1000);
  }
  $(document).ready(function(e) {
   $('#btn').click(function(){
    if($(this).html()=='开始'){
     $(this).html('停止');
     play();
    }
    else{
     clearTimeout(fn);
     $(this).html('开始');
    }
   });
  });
 </script>
</html>